<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="10">
                已上传样本
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="uploadTime" label="上传时间" width="180" />
                    <el-table-column prop="user" label="上传者" width="180" />
                    <el-table-column prop="sampleName" label="样本名" />
                    <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default="scope">
                        <el-button
                        link
                        type="primary"
                        size="small"
                        @click.prevent="deleteRow(scope.$index)"
                        >
                        样本详情
                        </el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="14"> 
                <el-card class="mgb20" shadow="hover">
                    <el-descriptions title="{}基本信息" direction="vertical" :column="2" border>
                        <el-descriptions-item label="MD5">kooriookami</el-descriptions-item>
                        <el-descriptions-item label="tlsh">18100000000</el-descriptions-item>
                        <el-descriptions-item label="文件类型">PE</el-descriptions-item>
                        <el-descriptions-item label="文件大小">2324</el-descriptions-item>
                    </el-descriptions>
                </el-card>

                <el-card class="mgb20" shadow="never">
                    <template #header>文件信息</template>
                    <el-row :gutter="10" class="mgb20">
                        <el-col :span="6">
                            <el-card shadow="hover" body-class="card-body">
                                <el-icon class="card-icon bg1">
                                    <User />
                                </el-icon>
                                <div class="card-content">
                                    <div class="card-num color1">header</div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" body-class="card-body">
                                <div class="card-content">
                                    <div class="card-num color1">Intel 386</div>
                                    <div>Target Machine:</div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" body-class="card-body">
                                <div class="card-content">
                                    <countup class="card-num color1" :end="147891" />
                                    <div>Entry Point</div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" body-class="card-body">
                                <div class="card-content">
                                    <countup class="card-num color1" :end="3" />
                                    <div>Contained Sections</div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10" class="mgb20">
                        <el-col :span="6">
                            <el-card shadow="hover" body-class="card-body">
                                <el-icon class="card-icon bg3">
                                    <User />
                                </el-icon>
                                <div class="card-content">
                                    <div class="card-num color3">overlay</div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" body-class="card-body">
                                <div class="card-content">
                                    <div class="card-num color3">WIN pe</div>
                                    <div>文件类型</div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" body-class="card-body">
                                <div class="card-content">
                                    <countup class="card-num color3" :end="147891" />
                                    <div>文件大小(kb)</div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" body-class="card-body">
                                <div class="card-content">
                                    <countup class="card-num color3" :end="7.999661" />
                                    <div>熵</div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10" class="mgb20">
                        <el-col :span="6">
                            <el-card shadow="hover" body-class="card-body">
                                <el-icon class="card-icon bg2">
                                    <User />
                                </el-icon>
                                <div class="card-content">
                                    <div class="card-num color2">imports</div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="18">
                            <el-card shadow="hover" body-class="card-body">
                                <el-descriptions title="" :column="5">
                                    <el-descriptions-item label=""><el-tag>OLEAUT32.dll</el-tag></el-descriptions-item>
                                    <el-descriptions-item label=""><el-tag>KERNEL32.DLL</el-tag></el-descriptions-item>
                                    <el-descriptions-item label=""><el-tag>ADVAPI32.dll</el-tag></el-descriptions-item>
                                    <el-descriptions-item label=""><el-tag>ADVAPI32.dll</el-tag></el-descriptions-item>
                                    <el-descriptions-item label=""><el-tag>ADVAPI32.dll</el-tag></el-descriptions-item>
                                    <el-descriptions-item label=""><el-tag>ADVAPI32.dll</el-tag></el-descriptions-item>
                                </el-descriptions>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10" class="mgb20">
                        <el-col :span="6">
                            <el-card shadow="hover" body-class="card-body">
                                <el-icon class="card-icon bg4">
                                    <User />
                                </el-icon>
                                <div class="card-content">
                                    <div class="card-num color4">sections</div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="18">
                            <el-card shadow="hover" body-class="card-body1">
                                <el-table
                                    :data="tableData1"
                                    height="250"
                                    style="width: 100%">
                                    <el-table-column
                                    prop="name"
                                    label="Name">
                                    </el-table-column>

                                    <el-table-column
                                    prop="virtualAddress"
                                    label="virtualAddress">
                                    </el-table-column>

                                    <el-table-column
                                    prop="virtualSize"
                                    label="virtualSize">
                                    </el-table-column>

                                    <el-table-column
                                    prop="rawSize"
                                    label="rawSize">
                                    </el-table-column>

                                    <el-table-column
                                    prop="entropy"
                                    label="entropy">
                                    </el-table-column>

                                    <el-table-column
                                    prop="chi2"
                                    label="chi2">
                                    </el-table-column>

                                </el-table>
                            </el-card>
                        </el-col>
                    </el-row>

                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useTransition } from '@vueuse/core'
import countup from '@/components/countup.vue';
import axios from 'axios';

const source = ref(0)
const outputValue = useTransition(source, {
    duration: 1500,
})
source.value = 172000

const value = ref(Date.now() + 1000 * 60 * 60 * 7)
const value1 = ref(1000);
setTimeout(() => {
    value1.value = 8000;
}, 5000);
const options = {
    startVal: 1000,
    decimalPlaces: 2,
    duration: 5,
    useGrouping: false,
    prefix: '$',
    separator: ',',
    decimal: '.',
    suffix: '',
}

const deleteRow = (index: number) => {
//   tableData.value.splice(index, 1)
}

const tableData1 = [{
          name: '.MPRESS1',
          virtualAddress: '4096',
          virtualSize: '143360',
          rawSize: '37888',
          entropy: '7.99',
          chi2:"281.36"
        }, {
          name: '.MPRESS1',
          virtualAddress: '4096',
          virtualSize: '143360',
          rawSize: '37888',
          entropy: '7.99',
          chi2:"281.36"
        }]

const tableData = ref([])
// {
//     date: '2016-05-01',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
// },
// 从后端获取数据
const fetchTableData = async () => {
    try {
        let userId = 1234;
        const response = await axios.post('http://127.0.0.1:5000/querySampleInfoListByUser', { userId });  // 请求后端数据
        tableData.value = []
        var res = []
        for(let ind in response["data"]){
            var tempData = response["data"][ind]
            var dic = new Array()
            dic["user"] =  tempData[2]
            dic["uploadTime"] =  tempData[3]
            dic["sampleName"] =  tempData[5]
            tableData.value.push(dic);
        }
    } catch (error) {
        console.error('获取数据失败:', error);
    }
};

// 组件挂载时获取数据
onMounted(() => {
  fetchTableData()
})

</script>

<style>
.card-body {
    display: flex;
    align-items: center;
    height: 100px;
    padding: 0;
}
.card-body1 {
    display: flex;
    align-items: center;
    height: 260px;
    padding: 0;
}

.bg1 {
    background: #2d8cf0;
}

.bg2 {
    background: #64d572;
}

.bg3 {
    background: #f25e43;
}

.bg4 {
    background: #e9a745;
}
</style>
<style scoped>
.countup {
    font-size: 24px;
}

.card-content {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
    padding: 0 20px;
}

.card-num {
    font-size: 30px;
}

.card-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}


.color0 {
    color: #fff;
}

.color1 {
    color: #2d8cf0;
}

.color2 {
    color: #64d572;
}

.color3 {
    color: #f25e43;
}

.color4 {
    color: #e9a745;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}
</style>